<template>
	<view class="content">
		<view class="box">
			<!-- 购物车商品列表 -->
			<view class="cart-list">
				<view class="cart-list-item" v-for="item in cartGoods" :key='item.goods_item'>
					<view class="left">
						<view class="cart_image">
							<image style="width: 72px;height: 72px;" :src="item.goods_image" mode="aspectFit"></image>
						</view>
						<view class="cart-center">
							<view class="cart_goodsName">
								<text>{{item.goods_name}}</text>
							</view>
							<!-- <view class="cart_goodsTagName">
							<text v-if="item.goods_adv_tag_list">
							{{item.goods_adv_tag_list[0]}}
							</text>
						</view> -->
							<view class="cart_goodsPrice">
								<text class="uni-product-price-original">￥{{item.goods_shop_price}}</text>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="cart_goodsNum">
							<view class="uni-inline-item">
								<uni-number-box :min="1" v-on:change="onNumberChange" :value='item.buy_num' :parms='item.goods_key'></uni-number-box>
							</view>
						</view>
						<text style="padding-top: 15upx;" @tap="handleDelCartGoods(item.goods_key)">删除</text>
					</view>
				</view>
			</view>

			<!-- 结算 -->
			<view class="footer-box">
				<view class="footer">
					<view class="totalPrice">
						总计：<text class="uni-product-price-original" style="font-size: 40upx;">￥{{cartPrice}}</text>
					</view>
					<view class="checkout">
						<button type="primary" style="border-radius:0" @tap="toOrder()">立即结算</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '../../../components/uni-number-box.vue'
	import {
		getCartData,
		updateCart,
		delCartGoods
	} from '../../../common/api.js'

	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				cartData: {}, //购物车数据
				cartGoods: [], //购物车商品数据
				cartPrice: 0 //总价格
			}
		},
		methods: {
			handleCartData() {
				let reqData = {
					user_unionid: this.$store.state.userInfo.user_unionid
				}
				getCartData(reqData).then(res => {
					this.cartData = res.data.result
					this.$store.commit('setCartData', this.cartData)
					this.cartGoods = this.cartData.cart_goods
					this.cartPrice = this.cartData.cart_price
				})
			},
			onNumberChange(value) {
				let reqData = {
					user_unionid: this.$store.state.userInfo.user_unionid,
					goods_key: value.data,
					buy_goods_num: value.num
				}
				updateCart(reqData).then(res => {
					let resData = res.data
					this.cartPrice = resData.result.cart_price
				})
			},
			handleDelCartGoods(val) {
				let that = this
				uni.showModal({
					title: '删除',
					content: '删除该商品？',
					success(res) {
						if (res.confirm === true) {
							let reqData = {
								goods_key: val,
								user_unionid: that.$store.state.userInfo.user_unionid
							}
							delCartGoods(reqData).then(res => {
								console.log(res.data)
								that.handleCartData()
							})
						}
					}
				})
			},
			toOrder() {
				uni.navigateTo({
					url: '../../order/order'
				})
			},
		},
		onShow() {
			if ( this.$store.state.userInfo.user_token){
				 this.handleCartData()
			}else{
				uni.showModal({
				    title: '提示',
				    content: '你还没有登录，要去登录吗',
				    success: function (res) {
				        if (res.confirm) {
				           uni.navigateTo({
				           	url: '../../user/login'
				           })
				        } else if (res.cancel) {
				            uni.switchTab({
				            	url: '../index/index'
				            })
				        }
				    }
				});
			}
	
			
		},
		onLoad() {
				
			
		}
	}
</script>

<style>
	.content {
		background: rgb(248, 248, 248);
	}

	.box {
		padding: 20upx
	}

	.cart-list-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25upx;
		border-bottom: #C0C0C0 solid 2upx;

	}

	.cart-list-item .left {
		display: flex;
		flex-direction: row;
	}

	.cart-list-item .right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.footer-box {
		width: 100%;
		position: fixed;
		left: 0;
		/* 在h5中要设tabbar栏的高度 暂时不适配 */
		bottom: 0;

	}

	.footer {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: rgb(248, 248, 248);
	}
</style>
